import React, { Component } from 'react';
import { StyleSheet, View, Text, TouchableOpacity, Image, ScrollView } from 'react-native';
import navigationSeevice from '../../../../../components/navigation/navigationSeevice';
import { style } from '../../../../../theme/style';
import HTTP from '../../../../../utils/http';
import { API, API_GENERATE } from '../../../../../config/api';
import { GLOBAL } from '../../../../../config/global';
import { Common } from '../../../../../component/common/Common';
import { ProductSelect } from './_components/ProductSelect';

const scale = GLOBAL.SCALE;
export class ContractorChangeDetail extends Component {
	static navigationOptions = ({ navigation }) => {
		return {
			headerTitle: '用户变更信息',
			headerTintColor: style.color.white,
			headerLeft: <Common type="headLeft" onPress={() => { navigation.goBack() }} color='#fff' />,
			headerRight: (<Image style={{ marginLeft: 18 * scale, width: 9 * scale, height: 16 * scale }} source={require('../../../../../imgs/goBackEmpty.png')} />),
			headerStyle: style.head.headerStyle,
			headerTitleStyle: {
				flex: 1,
				textAlign: 'center',
			}
		}
	};
	constructor(props) {
		super(props);
		this.changeDetail = props.navigation.state.params.changeDetail || {};
		this.preDetail = props.navigation.state.params.preDetail || {};
		this.contractType=[
			'不带入','姓名+邮箱','姓名+手机号'
		]
		this.state = {
			goodsModal: false,
			goodsTreeList: [],
			curDetail: this.changeDetail,
			tabIndex: 1
		}
	}

	componentWillMount () {
		this._init();
	}

	_init = async () => {
		const goodsTreeList = await this._getGoodsTreeList();
		this.setState({ goodsTreeList });
	}

	//经营品类
	_getGoodsTreeList = async (searchCode) => {
		const { curDetail } = this.state;
		let { companyId, contactorId } = curDetail;
		const goodsTreeList = await HTTP.POST(API_GENERATE(API.CONTRACTOR_GOODSTREE_LIST), { companyId, contractorId: contactorId, ...searchCode });
		return goodsTreeList;
	}

	_cancelPress (a) {
		this.setState({ goodsModal: false })
	}

	_changeTab (tabIndex) {
		this.setState({ tabIndex, curDetail: tabIndex ? this.changeDetail : this.preDetail })
	}

	_renderBaseInfo () {
		const { curDetail } = this.state;
		let { contactorName, mobileNo, contactorPosition, contactorAddress,email,attachedFlag} = curDetail;
		return (
			<View style={styles.detailBase}>
				<View style={styles.row}>
					<Text style={[styles.commonText, styles.label]}>联系人</Text>
					<Text style={[styles.commonText]}>{contactorName || '--'}</Text>
				</View>
				<View style={styles.row}>
					<Text style={[styles.commonText, styles.label]}>电话</Text>
					<Text style={[styles.commonText]}>{mobileNo || '--'}</Text>
				</View>
				<View style={styles.row}>
					<Text style={[styles.commonText, styles.label]}>经营品类</Text>
					<Text style={[styles.commonText, { color: style.color.themeColor }]} onPress={() => this.setState({ goodsModal: true })}>【查看品类】</Text>
				</View>
				<View style={styles.row}>
					<Text style={[styles.commonText, styles.label]}>合同带入</Text>
					<Text style={[styles.commonText]}>{attachedFlag?this.contractType[attachedFlag-1] : '--'}</Text>
				</View>
				<View style={styles.row}>
					<Text style={[styles.commonText, styles.label]}>职位</Text>
					<Text style={[styles.commonText]}>{contactorPosition || '--'}</Text>
				</View>
				<View style={styles.row}>
					<Text style={[styles.commonText, styles.label]}>邮箱</Text>
					<Text style={[styles.commonText]}>{email || '--'}</Text>
				</View>	
				<View style={styles.row}>
					<Text style={[styles.commonText, styles.label]}>地址</Text>
					<Text style={[styles.commonText]}>{contactorAddress || '--'}</Text>
				</View>
				
			</View>
		)
	}

	render () {
		const { goodsModal, goodsTreeList, tabIndex } = this.state;
		return (
			<View style={styles.detail}>
				<View style={styles.tabsView}>
					<TouchableOpacity style={[styles.tabView, { borderBottomWidth: tabIndex ? 0 : 2 }]} activeOpacity={0.8} onPress={() => this._changeTab(0)}>
						<Text style={styles.tabText}>变更前</Text>
					</TouchableOpacity>
					<TouchableOpacity style={[styles.tabView, { borderBottomWidth: tabIndex ? 2 : 0 }]} activeOpacity={0.8} onPress={() => this._changeTab(1)}>
						<Text style={styles.tabText}>变更后</Text>
					</TouchableOpacity>
				</View>

				{this._renderBaseInfo()}

				{
					goodsModal ?
						<ProductSelect
							// confirmPress={this._confirmPress}
							cancelPress={() => this._cancelPress()}
							searchPress={(searchCode) => this._getGoodsTreeList(searchCode)}
							data={goodsTreeList}
							modalVisible={goodsModal} />
						: null
				}
			</View>
		)
	}
}

const styles = StyleSheet.create({
	detail: {
		flex: 1,
		alignItems: 'center',
		// paddingTop: 30 * scale
	},
	tabsView: {
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'center',
		paddingTop: 15 * scale,
		paddingBottom: 5 * scale,
		marginBottom: 20 * scale,
		backgroundColor: style.color.themeColor
	},
	tabView: {
		flex: 1,
		alignItems: 'center',
		marginLeft: 20,
		marginRight: 20,
		paddingBottom: 10 * scale,
		borderBottomColor: '#fff'
	},
	tabText: {
		color: '#fff',
		fontSize: 14 * scale,
		fontWeight: 'bold'
	},
	detailBase: {
		width: '100%',
		paddingLeft: 20 * scale,
		paddingRight: 20 * scale,
	},
	row: {
		flexDirection: 'row',
		alignItems: 'center',
		paddingLeft: 6 * scale,
		paddingBottom: 22 * scale,
	},
	commonText: {
		fontSize: 12 * scale,
		color: '#000',
		marginRight: 10 * scale,
	},
	label: {
		fontWeight: 'bold',
		width: 80 * scale
	},
	logContainer: {
		maxHeight: 320 * scale,
		width: '90%',
		backgroundColor: style.color.bgGray,
		padding: 18 * scale,
	},
	modalBody: {
		paddingTop: 10 * scale,
	},
	progressItem: {
		position: 'relative',
		paddingLeft: 14 * scale,
		paddingLeft: 48 * scale,
	},
	logLine: {
		height: '100%',
		width: 1 * scale,
		backgroundColor: '#EBEDF0',
		position: 'absolute',
		left: 32 * scale,
		top: 5 * scale
	},
	nodeIcon: {
		width: 5 * scale,
		height: 5 * scale,
		backgroundColor: '#848A96',
		borderRadius: 5 * scale,
		position: 'absolute',
		top: 2 * scale,
		left: 30 * scale,
	},
	nodeStatus: {
		position: 'absolute',
		fontSize: 10 * scale,
		top: -2 * scale,
		left: 0 * scale,
		color: '#959BA8'
	},
	nodeTitle: {
		fontSize: 10 * scale,
		marginTop: -3 * scale,
		color: '#959BA8'
	},
	nodeInfo: {
		fontSize: 10 * scale,
		color: '#959BA8',
		lineHeight: 14 * scale,
	},
})